<!DOCTYPE html>
<svg width="200" height="200">
  <linearGradient id="g" x2="0" y2="1">
    <stop offset="0" stop-color="red"/>
    <stop offset="1" stop-color="blue"/>
  </linearGradient>
  <pattern id="p" width="0.25" height="0.25" viewBox="0 0 10 10">
    <rect width="5" height="5"/>
    <rect x="5" y="5" width="5" height="5"/>
  </pattern>
  <g transform="scale(10)">
    <rect x="2.5" y="2.5" width="4" height="4"
          fill="url(#g)" stroke="url(#g)"
          vector-effect="non-scaling-stroke" stroke-width="10"
          paint-order="stroke fill"/>

    <rect x="10" y="2.5" width="4" height="4"
          fill="url(#p)" stroke="url(#p)"
          vector-effect="non-scaling-stroke" stroke-width="10"
          paint-order="stroke fill"/>
  </g>
</svg>
